<template>
	<a-menu
		mode="inline"
		:selected-keys="route.matched.map(o => o.path)"
		v-model:openKeys="openKeys">
		<template v-for="menu in routes" :key="menu.path">
			<a-sub-menu v-if="!menu.meta.hidden" :key="menu.path" popupClassName="sub-menu-popup">
				<template v-if="menu.meta.icon" #icon>
					<svg-icon :icon-class="menu.meta.icon" />
				</template>
				<template #title>{{ menu.meta.title }}</template>
				<template v-for="sub in menu.children">
					<a-menu-item v-if="!sub.meta.hidden" :key="sub.path">
						<a :class="[route.path.startsWith(sub.path) ? 'active' : '']" @click="navigateToRoute(sub)">{{ sub.meta.title }}</a>
					</a-menu-item>
				</template>
			</a-sub-menu>
		</template>
	</a-menu>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue'
	import {useRoute, useRouter} from 'vue-router'
	import {routes} from '@/router/home'

	const route = useRoute()
	const router = useRouter()

	const navigateToRoute = (menu: any) => {
		if (menu.path.startsWith('http')) {
			window.open(menu.path, '_blank')
		} else {
			router.push(menu)
		}
	}
	const openKeys = ref<any>([])

	onMounted(() => {
		openKeys.value = route.matched.map(o => o.path)
	})
</script>

<style lang="less"></style>
